<script lang="ts" setup>
// import { NotificationsCircle } from "@vicons/ionicons5";
import BaseWindow from "@/components/base-window/index.vue";
import { onMounted, ref } from "vue";
import Pie3d from "@/components/echarts/pie-3d/index.vue";
import progressChart from "@/components/echarts/progress/index.vue";
import u144Svg from "@/assets/svg/u144.svg";
import u146Svg from "@/assets/svg/u146.svg";
onMounted(() => {});
const list = ref([
  {
    name: "已用容量",
    value: "2213吨",
  },
  {
    name: "可用容量",
    value: "2213吨",
  },
]);
</script>
<template>
  <BaseWindow title="仓房分析">
    <div class="wrapper">
      <Pie3d></Pie3d>
      <div class="progress">
        <progressChart></progressChart>
        <div class="right">
          <div class="top">
            <span class="top-title">仓库总容量</span>
            <span class="top-value">18899吨</span>
          </div>
          <div class="bottom">
            <div class="progress-item" style="width: 144px"></div>
          </div>
        </div>
      </div>
      <div class="card-list">
        <div
          :style="{ backgroundImage: `url(${u144Svg})` }"
          v-for="item in list"
          class="card-item"
        >
          <div class="card-item-top">
            {{ item.name }}
          </div>
          <div class="card-item-center">
            <img :src="u146Svg" alt="" />
          </div>
          <div class="card-item-bottom">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
  </BaseWindow>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 15px 30px;
  flex-wrap: wrap;
  width: 450px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.progress {
  width: 100%;
  display: flex;
  margin: 15px 0;
}
.bottom {
  border: 1px solid #23fffc88;
  width: 340px;
  padding: 4px;
}
.progress-item {
  background-image: linear-gradient(to right, transparent, #23fffc);
  height: 16px;
}
.right {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 12px;
}
.top {
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-title {
  color: grey;
}
.top-value {
  color: #23fffc;
  font-weight: bold;
}
.card-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-item {
  width: 165px;
  height: 101px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
